<template>
    <view class="top-up-head-left-order">
        <text>请选择支付方式</text>
    </view>
    <view class="pay-order-list">
        <view class="pay-order-item" v-for="item in state.payChannelList.filter( o => !o.isHide)"  @click="checkFn(item)">
            <view class="pay-order-item-left">
                <img :src="item.icon" alt="">
                <text>{{ item.name }}</text>
            </view>
            <view class="pay-order-item-right">
                <img src="@/assets/image/icon01.png" alt="" v-if="item.isCheck">
                <img src="@/assets/image/icon02.png" alt="" v-else>
            </view>
        </view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import { onLoad } from '@dcloudio/uni-app'

let { proxy } = getCurrentInstance()

import {
    payChannel, // 支付通道
} from "@/api/person"

const props = defineProps({
    isGold:{
        type:Boolean,
        default:false
    }
})

import c1 from "@/assets/image/icon75.png"
import c2 from "@/assets/image/icon74.png"
import c3 from "@/assets/image/icon25.png"

const emits= defineEmits(["update:payWayType"])

let UserInfo = JSON.parse(getAuthorization("userInfo"))

const state = reactive({
    show: false,
    curIndex: false,
    payChannelList: [
        // {
        //     id: '0',
        //     name: '微信',
        //     payWay: 0,
        //     isCheck: false,
        //     icon: c1,
        // },
        {
            id: '1',
            name: '支付宝',
            payWay: 1,
            isCheck: false,
            icon: c2,
        },
        {
            id: '3',
            name: '金币' + '('+ UserInfo.Money +')',
            payWay: 3,
            isCheck: false,
            icon: c3,
            isHide:props.isGold
        }
    ],
    payWay:0
})

onMounted(() => {
    getPayChannel()
})

const getPayChannel = async () => {
    let data = await proxy.$get(payChannel)
}

const checkFn = (item) => {
    state.payWay = item.payWay
    emits("update:payWayType",item)
    state.payChannelList.forEach(o => {
        if (o.id == item.id) {
            o.isCheck = true
        } else {
            o.isCheck = false
        }
    })
}

</script>
    
<style lang="scss" scoped>
.top-up-head-left-order {
    text-align: left;
    padding: 30rpx;
    color: #999;
}

.pay-order-list {
    padding-bottom: 20rpx;
}

.pay-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;

    .pay-order-item-left {
        display: flex;
        align-items: center;
        font-size: 32rpx;

        img {
            width: 44rpx;
            height: 44rpx;
            margin-right: 10rpx;
        }
    }

    .pay-order-item-right {
        img {
            width: 32rpx;
            height: 32rpx;
        }
    }

}
</style>
    